<template>
  <section>
    <el-form label-width="50px">
      <el-form-item>
        <el-button size="mini" type="primary" @click="addBtn">+</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="cardList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="创建时间" prop="created" :formatter="timeFormatter"/>
      <el-table-column label="sn" prop="sn" />
      <el-table-column label="标题" prop="title"/>
      <!--<el-table-column label="单位" prop="unit" />-->
      <el-table-column label="有效期">
        <template slot-scope="scope">
          <div v-if="scope.row.isTime">{{scope.row.totalValue}} {{scope.row.unit}}</div>
          <div v-if="scope.row.timeValue">{{scope.row.timeValue}} {{timeList.find(t=>t.code === scope.row.timeType).name}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click='confirm(scope.row)' size="mini">编辑</el-button>
          <el-button @click='del(scope.row)' size="mini" v-if="!scope.row.edit" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <el-dialog :visible.sync="editDialog" :title="currCard.id?'编辑':'新建'" v-if="editDialog">
      <edit-card :card="currCard" v-on:cancel="getECardDefineList"></edit-card>
    </el-dialog>
  </section>
</template>

<script>
  import editCard from './editCard'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "eCardList",
    components:{editCard},
    data(){
      return{
        editDialog:false,
        currCard:null,
        cardList:null,
        totalPage:0,
        timeList:[
          {code:'YYYY',val:0,name:'年'},
          {code:'MM',val:0,name:'月'},
          {code:'WW',val:0,name:'周'},
          {code:'DD',val:0,name:'天'},
        ],
      }
    },
    created(){
      this.getECardDefineList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      timeFormatter(a,b,c,d){
        // console.log(c)
        return dateFormater.format(c)
      },
      goPage(val){
        this.getECardDefineList(val-1)
      },
      getECardDefineList(pageNo){
        this.fetch({name:"getECardDefineList",data:{page:pageNo?pageNo:0,departmentId:this.department.id}})
          .then(res=>{
            console.log('获取会员卡列表-----',res)
            this.cardList=res.content
            this.totalPage = res.totalPages
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addBtn(){
        this.currCard={title:'',sn:'',unit:'',isNumber:false,isTime:false,totalValue:0,timeValue:0,data:{},departmentId:this.department.id}
        this.editDialog=true
      },
      confirm(row){
        console.log(row)
        this.currCard=row
        this.editDialog=true
      },
      del(row){//删除按钮
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delECardDefine",data:{id:row.id}})
              .then(res=>{
                this.$message({type: 'success', message: '删除成功！'})
                this.getECardDefineList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({type: 'info', message: '已取消删除'})
          })
      },
    }
  }
</script>

<style scoped>

</style>
